<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>个人信息管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="/public/static/css/font.css">
  <link rel="stylesheet" href="/public/static/css/weadmin.css">
  <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
  <!--[if lt IE 9]>
      <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
      <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div class="weadmin-body">
    <form class="layui-form">
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red"></span>头像
        </label>
        <div class="layui-input-inline">
          <img style="width: 100px; height: 100px;" src="<%- users.avatarurl %>" alt="用户头像" ,title="用户title头像">
        </div>

      </div>
      <div class="layui-form-item">
        <label for="username" class="layui-form-label">
          <span class="we-red">*</span>登录名
        </label>
        <div class="layui-input-inline">
          <input type="text" <% if(type!=='add'){ %> disabled <% } %> id="username" name="username" required=""
            lay-verify="required" autocomplete="off" value="<%- users.username %>" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
          <span class="we-red">*</span>将会成为您唯一的登入名
        </div>
      </div>
      <div class="layui-form-item">
        <label for="phone" class="layui-form-label">
          <span class="we-red">*</span>手机
        </label>
        <div class="layui-input-inline">
          <input type="text" value="<%- users.mobile %>" id="phone" name="mobile" required="" lay-verify="phone"
            autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
          <span class="we-red">*</span>将会成为您唯一的登入名
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_email" class="layui-form-label">
          <span class="we-red">*</span>邮箱
        </label>
        <div class="layui-input-inline">
          <input type="text" value="<%- users.email %>" id="L_email" name="email" required="" lay-verify="email"
            autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
          <span class="we-red">*</span>
        </div>
      </div>
      <div class="layui-form-item">
        <label class="layui-form-label"><span class="we-red">*</span>角色</label>
        <div class="layui-input-block">
          <% roleList.forEach((item,index)=>{ %>
          <input type="radio" name="roleid" value="<%- item.id %>" lay-skin="primary" title="<%- item.rolename %>"
            <% if(users.roleid===roleList[index].id) { %> checked="true" <% } %> >
          <% }) %>
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_pass" class="layui-form-label">
          <span class="we-red">*</span>密码
        </label>
        <div class="layui-input-inline">
          <input type="password" id="L_pass" name="password" required="" lay-verify="pass" autocomplete="off"
            class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux">
          6到16个字符
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_repass" class="layui-form-label">
          <span class="we-red">*</span>确认密码
        </label>
        <div class="layui-input-inline">
          <input type="password" id="L_repass" name="repassword" required="" lay-verify="repass" autocomplete="off"
            class="layui-input">
        </div>
      </div>
      <% if(type!=='add'){ %>
      <div class="layui-form-item">
        <label for="L_repass" class="layui-form-label">
          <span class="we-red">*</span>头像上传
        </label>
        <button type="button" class="layui-btn" id="imgFile">
          <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <!-- <div class="layui-input-inline">
          <input type="file" id="imgFile" name="imgFile" required=""
            class="layui-input">
        </div> -->
      </div>
      <% } %>
      <div class="layui-form-item">
        <label for="L_repass" class="layui-form-label">
        </label>
        <button class="layui-btn" lay-filter="submit" lay-submit="">
          提交
        </button>
      </div>
    </form>
  </div>
  <script src="/public/lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript">
    layui.extend({
      admin: '{/}/public/static/js/admin'
    });
    layui.use(['form', 'layer', 'admin', 'upload', 'jquery'], function () {
      var form = layui.form,
        admin = layui.admin,
        layer = layui.layer,
        upload = layui.upload,
        $ = layui.jquery;

      //自定义验证规则
      form.verify({
        nikename: function (value) {
          if (value.length < 5) {
            return '昵称至少得5个字符啊';
          }
        }
        , pass: [/(.+){6,12}$/, '密码必须6到12位']
        , repass: function (value) {
          if ($('#L_pass').val() != $('#L_repass').val()) {
            return '两次密码不一致';
          }
        }
      });

      //监听提交
      form.on('submit(submit)', function (data) {
        // console.log(data);
        //发异步，把数据提交给php
        $.ajax({
          url: '/admin/users/userlist/<%- type %>',
          data: data.field,
          type: 'POST',
          success: function (res) {
            if (res.code === 1) {
              layer.msg(res.msg)
            } else {
              layer.alert("提交成功", { icon: 6 }, function () {
                // 获得frame索引
                var index = parent.layer.getFrameIndex(window.name);
                //关闭当前frame
                parent.layer.close(index);
                // 将frame的上一层刷新
                window.parent.location.reload()
              });
            }

          }
        })
        return false;
      });

      //头像上传
      var uploadInst = upload.render({
        elem: '#imgFile' //绑定元素
        , url: '/admin/users/userlist/imgupload?id=<%- users.id %>' //上传接口
        , field: 'imgFile'// 配置字段名，必须
        , acceptMime: 'image/*' //打开文件框的文件类型筛选
        , size: 1024 //上传文件大小限制
        , done: function (res) {
          //上传完毕回调
          layer.msg('头像上传完成')
          $('body > div > form > div:nth-child(1) > div > img').attr('src', res.resPath)

        }
        , error: function (err) {
          //请求异常回调
          console.log(err);
        }
      });

    });
  </script>
</body>

</html>